<template>
    <div class="flex items-center justify-between">
        <div class="text-24px font-700">Swap</div>
        <div class="i-carbon:settings w-18px h-18px"></div>
    </div>
    <div class="flex flex-col justify-center mt-16px">
        <div class="flex flex-row justify-between items-center">
            <div></div>
            <div class="text-#fff text-12px font-500">Balance</div>
        </div>
        <div class="flex flex-row justify-between items-center">
            <div class="text-14px font-500">For: HNY</div>
            <div class="text-#fff text-12px font-500">560.05069 TGR</div>
        </div>
        <div
            class="mt-8px w-462px h-50px bg-white rounded-10px border-#e8effb p-4px flex items-center justify-between"
        >
            <div
                class="w-124px h-42px bg-#EFF4FC rounded-8px flex justify-center items-center gap-10px cursor-pointer"
                @click="appStore.toggleSelectToken"
            >
                <el-image class="w-24px" src="/images/logo.svg" fit="fill" />
                <div class="text-14px font-500 text-#000">HNY</div>
                <div class="i-carbon:overflow-menu-vertical text-#000 text-20px font-500" />
            </div>
            <div>
                <el-input
                    v-model="input1"
                    style="width: 270px; --el-input-height: 50px; font-size: 18px"
                    size="large"
                    placeholder="0"
                />
            </div>
            <div
                class="w-58px h-30px flex justify-center items-center text-orange bg-#EFF4FC rounded-8px text-12px font-500 border-1px border-solid border-blue-100 cursor-pointer"
                @click="onMax"
            >
                Max
            </div>
        </div>
    </div>
    <div class="flex flex-col justify-center">
        <div class="flex flex-row justify-between items-center">
            <div></div>
            <div class="text-#fff text-12px font-500">Balance</div>
        </div>
        <div class="flex flex-row justify-between items-center">
            <div class="text-14px font-500">For: HNY</div>
            <div class="text-#fff text-12px font-500">560.05069 TGR</div>
        </div>
        <div
            class="mt-8px w-462px h-50px bg-white rounded-10px border-#e8effb p-4px flex items-center justify-between"
        >
            <div
                class="w-124px h-42px bg-#EFF4FC rounded-8px flex justify-center items-center gap-10px cursor-pointer"
                @click="appStore.toggleSelectToken"
            >
                <el-image class="w-24px" src="/images/tgr.svg" fit="fill" />
                <div class="text-14px font-500 text-#000">TGR</div>
                <div class="i-carbon:overflow-menu-vertical text-#000 text-20px font-500" />
            </div>
            <div>
                <el-input
                    v-model="input2"
                    style="width: 328px; --el-input-height: 50px; font-size: 18px"
                    size="large"
                    placeholder="0"
                />
            </div>
        </div>
    </div>
    <div
        class="flex flex-col justify-center bg-white rounded-8px p-16px gap-16px text-#4F545B font-600"
    >
        <div class="flex justify-between items-center">
            <div>Price:</div>
            <div></div>
        </div>
        <div class="flex justify-between items-center">
            <div>Slippage Tolarance:</div>
            <div></div>
        </div>
        <div class="flex justify-between items-center">
            <div>Minimum received:</div>
            <div></div>
        </div>
        <div class="flex justify-between items-center">
            <div>Price Impact:</div>
            <div class="text-green">< 0.01%</div>
        </div>
        <div class="flex justify-between items-center">
            <div>Route:</div>
            <div></div>
        </div>
    </div>
    <div
        class="w-462px h-50px bg-#FF9500 hover:bg-#F38E03 active:bg-#D17A00 rounded-8px flex justify-center items-center cursor-pointer mt-16px"
        @click="appStore.connectWallet"
    >
        Connect Wallet
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useAppStore } from '@/stores/app'

const appStore = useAppStore()

const input1 = ref('')
const input2 = ref('')

const onMax = () => {
    input1.value = appStore.mainNetValue
}
</script>

<style scoped>
:deep(.el-input__wrapper),
:deep(.el-input__wrapper:hover),
:deep(.el-input__wrapper:focus) {
    box-shadow: unset !important;
}
</style>
